<template>
  <div class="time-progress">
    <canvas
      id="timeProgress"
      style="width: 365px; height: 250px"
      v-show="canvasData.length > 0"
    />
    <van-empty v-show="canvasData.length == 0" description="暂无数据" />
  </div>
</template>
<script>
import F2 from "@antv/f2";
export default {
  name: "time-progress",
  props: ["canvasData", "tabClickType"],
  mounted() {
    this.initChart();
  },
  watch: {
    canvasData(n) {
      this.initChart();
      this.$forceUpdate();
    },
  },
  methods: {
    initChart() {
      let data = [];
      if (this.tabClickType == 1) {
        this.canvasData.forEach((item, index) => {
          let obj = {};
          obj.x = item.suname;
          obj.y = [];
          obj.y.push(item.starttime);
          obj.y.push(item.endtime);
          data.push(obj);
        });
      } else if (this.tabClickType == 2) {
        this.canvasData.forEach((item, index) => {
          let obj = {};
          obj.x = item.iname;
          obj.y = [];
          obj.y.push(item.starttime);
          obj.y.push(item.endtime);
          data.push(obj);
        });
      }

      const chart = new F2.Chart({
        id: "timeProgress",
        pixelRatio: window.devicePixelRatio,
        padding: ["auto", 20, "auto", "auto"],
      });

      chart.source(data, {
        y: {
          tickCount: 5,
        },
      });
      
      chart.coord({
        transposed: true,
      });
      
      chart.tooltip({
        showItemMarker: true,
        triggerOn: "click",
        triggerOff: "touchmove",
        onShow: function onShow(ev) {
          const items = ev.items;
          items[0].name = items[0].origin.x;
          const value = items[0].origin.y;
          items[0].value = value[0] + " 至 " + value[1];
        },
      });
      // 坐标轴文本旋转
      chart.axis("y", {
        label: {
          rotate: -Math.PI / 2,
          textAlign: "end",
          textBaseline: "middle",
        },
        labelOffset: 10, // 坐标轴文本距离轴线的距离
      });
      chart
        .interval()
        .position("x*y")
        .animate({
          appear: {
            animation: "shapesScaleInY",
          },
        });
      chart.render();
    },
  },
};
</script>
<style lang="scss">
</style>